<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="renderer" content="webkit" />
    <meta name="x5-fullscreen" content="yes" />
    <meta name="full-screen" content="yes" />
    <title>Title</title>
    <link href="/Content/LMS/css/base/reset.css" rel="stylesheet" />
    <link href="/Content/LMS/css/base/base.css" rel="stylesheet" />
    <!--<link href="css/fonts/icomoon/style.css" rel="stylesheet" />-->
    <link href="/Content/LMS/plugins/modal/modal.css" rel="stylesheet" />
    <link href="/Content/LMS/plugins/swiper3/swiper.min.css" rel="stylesheet" />
    <link href="/Content/LMS/css/struct/custom.css" rel="stylesheet" />
    <link href="/Content/LMS/css/struct/layout.css" rel="stylesheet" />
    <link href="/Content/LMS/css/theme/dark/style.css" rel="stylesheet" />
</head>
<body>
    <div class="background"></div>
    <div class="left-menu" data-struct="header footer">
        <header class="menu-header">
            <h4>User Info</h4>
            <div class="sub-title">Nothing is impossible!</div>
        </header>
        <div class="container">
            <div class="list-scrollbar no-border">
                <ul class="list nbt">
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                </ul>
            </div>
        </div>
        <footer class="menu-footer">
            <div class="btn-group" align="top">
                <a href="javascript:;" class="text" data-toggle="dropdown">
                    <i class="icomoon icon-setting-fill"></i>
                    <span>皮肤</span>
                </a>
                <ul id="themeList" class="list link dropdown arrow">
                    <li>
                        <a href="javascript:;" data-theme-src="/Content/LMS/css/theme/classic/style.css?v=3">
                            <i class="icon-theme theme-classic"></i>
                            <span class="middle">经典</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" data-theme-src="/Content/LMS/css/theme/default/style.css?v=3">
                            <i class="icon-theme theme-light"></i>
                            <span class="middle">浅色</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" data-theme-src="/Content/LMS/css/theme/dark/style.css?v=3">
                            <i class="icon-theme theme-dark"></i>
                            <span class="middle">深色</span>
                        </a>
                    </li>
                </ul>
            </div>
        </footer>
    </div>
    <div class="wrapper list-wrapper" data-struct="header">
        <header class="header">
            <div class="left-button" data-action="open-left-menu">
                <button type="button" class="btn">
                    <i class="icomoon icon-menu"></i>
                </button>
            </div>
            <div class="right-button">
                <a href="#">
                    <img src="/Content/LMS/images/logo.png" class="logo" style="height: 30px;">
                </a>
                <!--<div class="btn-group" align="right">
                    <button class="btn btn-unstyled btn-dropdown nocaret">
                        <i class="icomoon icon-more"></i>
                    </button>
                    <ul class="list link dropdown" id="list1">
                        <li><a href="javascript:;">DropDownItem 1</a></li>
                        <li><a href="javascript:;">DropDownItem 2</a></li>
                        <li><a href="javascript:;">DropDownItem 3</a></li>
                        <li><a href="javascript:;">DropDownItem 4</a></li>
                        <li><a href="javascript:;">DropDownItem 5</a></li>
                    </ul>
                </div>-->
            </div>
            <!--<div class="head-center">
                Title
            </div>-->
        </header>
        <div class="container nogap" role="main">
            <div class="banner">
                <div id="swiper1" class="swiper-container demo">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img class="slide-image" alt="Slide Image" src="/Content/LMS/images/bg1.jpg" />
                        </div>
                        <div class="swiper-slide">
                            <img class="slide-image" alt="Slide Image" src="/Content/LMS/images/bg1.jpg" />
                        </div>
                        <div class="swiper-slide">
                            <img class="slide-image" alt="Slide Image" src="/Content/LMS/images/bg1.jpg" />
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    <!-- 如果需要导航按钮 -->
                    <!--<div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>-->
                    <!-- 如果需要滚动条 -->
                    <!--<div class="swiper-scrollbar"></div>-->
                </div>
                <div class="nav-tabs myTabs">
                    <div class="tabs-scrollbar">
                        <ul class="tabs" data-toggle="tabs">
                            <li data-target="#myList1" class="active"><a href="javascript:;">标签</a></li>
                            <li data-target="#myList2"><a href="javascript:;">标签</a></li>
                            <li><a href="javascript:;">标签</a></li>
                            <li><a href="javascript:;">标签</a></li>
                            <li><a href="javascript:;">标签</a></li>
                            <li><a href="javascript:;">标签</a></li>
                            <li><a href="javascript:;">标签</a></li>
                            <li><a href="javascript:;">标签</a></li>
                            <li><a href="javascript:;">标签</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="list-bottom margin-top-10">
                <div id="myList" class="list-scrollbar">
                    <!-- React List -->
                    <!--<ul class="list list-thumb list-corner">
                        <li>
                            <div class="align-left">
                                <div class="cover" style="background-image: url(/Content/LMS/images/bg1.jpg);"></div>
                            </div>
                            <div class="align-right">
                                <div class="info">
                                    <p class="title">篮球场上的数学原理原理原理</p>
                                    <p class="secondary">课程时长：45:00</p>
                                    <p class="secondary">学习进度：20:00</p>
                                </div>
                            </div>
                            <div class="corner corner-success">
                                <div class="corner-wrapper corner-text">
                                    已报名
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="align-left">
                                <div class="cover" style="background-image: url(/Content/LMS/images/bg1.jpg);"></div>
                            </div>
                            <div class="align-right">
                                <div class="info">
                                    <p class="title">篮球场上的数学原理原理原理</p>
                                    <p class="secondary">课程时长：45:00</p>
                                    <p class="secondary">学习进度：20:00</p>
                                </div>
                            </div>
                            <div class="corner corner-danger">
                                <div class="corner-wrapper corner-text">
                                    未报名
                                </div>
                            </div>
                        </li>
                        <li class="disabled">
                            <div class="align-left">
                                <div class="cover" style="background-image: url(/Content/LMS/images/bg1.jpg);"></div>
                            </div>
                            <div class="align-right">
                                <div class="info">
                                    <p class="title">篮球场上的数学原理原理原理</p>
                                    <p class="secondary">课程时长：45:00</p>
                                    <p class="secondary">学习进度：20:00</p>
                                </div>
                            </div>
                            <div class="corner">
                                <div class="corner-wrapper corner-text">
                                    已截止
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="align-left">
                                <div class="cover" style="background-image: url(/Content/LMS/images/bg1.jpg);"></div>
                            </div>
                            <div class="align-right">
                                <div class="info">
                                    <p class="title">篮球场上的数学原理原理原理</p>
                                    <p class="secondary">课程时长：45:00</p>
                                    <p class="secondary">学习进度：20:00</p>
                                </div>
                            </div>
                        </li>
                    </ul>-->
                </div>
            </div>
        </div>
    </div>
    <script src="/Content/LMS/js/jquery/jquery-1.11.2.js"></script>
    <script src="/Content/LMS/js/react/react.min.js"></script>
    <script src="/Content/LMS/js/react/react-dom.min.js"></script>
    <script src="/Content/LMS/component/react/list.bak.js"></script>
    <script src="/Content/LMS/js/fastclick/fastclick.js"></script>
    <script src="/Content/LMS/plugins/modal/modal.js"></script>
    <script src="/Content/LMS/plugins/swiper3/swiper.jquery.min.js"></script>
    <script src="/Content/LMS/js/global.js"></script>
    <script type="text/javascript">
        $(function () {

            // 渲染React组件
            ReactDOM.render(
                React.createElement(ReactWebComponent.List, {
                    get: {
                        url: "/Content/LMS/component/react/test/list.txt",
                        data: { yourData: "formData" },
                        //result: []  //直接传入数组
                    }
                }),
                document.querySelector("#myList")
            );

            //用事件代理方式绑定列表项的click事件
            $("#myList").on("click", ".list > li:not(.disabled)", function () {
                window.location.href = "detail.html";
            });

            var swiper1 = new Swiper("#swiper1", {
                loop: true,
                speed: 600,
                autoplay: 3000,
                autoplayDisableOnInteraction: false
            });

            $(".list-cover > li").click(function(){
                window.location.href = "detail.html";
            });

            $("#themeList > li > a").click(function () {
                $("link[href*='theme']").attr("href", $(this).data("theme-src"));
            });

            Global.BindBackToTop($("[role='main']"));

        })
    </script>
<script type="text/javascript" charset="utf-8" src="http://192.168.1.51:8132/livereload.js"></script></body>
</html>